<template lang="html">
    <div id="subject">
        <section class="banner-section">
            <img src="../../img/banner.png">
        </section>
        <section class="mune-section">
            <ul>
                <li>
                    <router-link :to='{name:"product"}'>
                        <div class="mune-item">
                            <img src="../../img/product.png">
                            <p>
                                产品中心
                            </p>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link :to='{name:"About"}'>
                        <div class="mune-item">
                            <img src="../../img/about.png">
                            <p>
                                关于我们
                            </p>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link :to='{name:"partner"}'>
                        <div class="mune-item">
                            <img src="../../img/cooperative.png">
                            <p>
                                合作伙伴
                            </p>
                        </div>
                    </router-link>
    
                </li>
                <li>
                    <router-link :to='{name:"Honor"}'>
                        <div class="mune-item">
                            <img src="../../img/honor.png">
                            <p>
                                企业荣誉
                            </p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </section>
        <section class="mreading-section ng-scope">
            <div class="msection-title"> 推荐阅读
                <!--<a href='http://app.qixin007.com/oper/20161124-1/index.html?from=app3' target='_blank'>查看更多</a>--></div>
            <div class="mreading-main">
                <div class="mreading-items ng-scope" v-for="item in this.NewsDatalist">
                    <a @click="Contentdetail(item)">
                        <div class="mreading-items-img">
                             	<img v-if="item.newsPicture==null" src="../../img/aa.png">
										<img v-else :src="'http://222.77.181.149:8078'+item.newsPicture.fullPath">
                        </div>
                        <div class="mreading-items-info">
                            <p style="color:#43464f" class="ng-binding">{{item.title}}</p> <span class="ng-binding">{{item.createDate|time}}</span> </div>
                    </a>
    
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    import axios from 'axios';
    import {
        getApiByNewsData,
    } from '../../api/api';
    export default {
        components: {
    
        },
        data() {
            return {
                NewsDatalist:[],
            };
        },
    
        //方法
        methods: {
            NewsData() {
                let options = {
                    params: {
                        isTop: 1,
                        newsType: '',
                        currentPage: 1,
                        pageSize: 4,
                    }
                }
                getApiByNewsData(options).then((res) => {
                    if (res.success === true) {
                        this.NewsDatalist = res.data.data;
                    }
                })
            },
            Contentdetail: function(item) {
                sessionStorage.setItem('detailitem', JSON.stringify({
                    content: item
                }));
                this.$router.push({
                    name: 'Notedetail'
                })
            },
        },
        created() {
            this.NewsData()
        }
    }
</script>

<style lang="scss" scoped>
    .banner-section {
        width: 100%;
        height: auto;
    }
    
    
    /**/
    
    .mune-section {
        padding: 16px 0px;
        overflow: hidden;
        border-bottom: 10px solid #ececec;
        li {
            //  display: -webkit-flex; /* Safari */
            //  display: flex;
            width: 25%;
            float: left;
            text-align: center;
            //   justify-content:center;
            //    align-items:center
        }
        .mune-item {
            border-right: 1px solid #e5e5e5;
            box-sizing: border-box;
            img {
                width: 55%;
                margin-bottom: 5px;
            }
            p {
                margin: 0;
                color: #7a7a7a;
                font-size: .92rem;
            }
        }
    }
    
    .mune-section li:last-child .mune-item {
        border-right: none;
    }
    
    
    /**/
    
    .msection-title {
        font-size: 18px;
        font-weight: 700;
        margin: 20px 0;
        background: url(../../img/mtitle.740f9770.png) no-repeat;
        padding-left: 15px;
        background-size: 5px 25px;
        position: relative;
    }
    
    .mreading-main {
        padding: 0 15px;
    }
    
    .mindustry-items,
    .mreading-items {
        margin-bottom: 15px;
    }
    
    .mreading-items-img {
        height: 125px;
        border: 1px solid #e3e3e3;
        border-radius: 2px 2px 0 0;
        overflow: hidden;
        position: relative;
        img {
            left: 50%;
                top: -26%;
            position: relative;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
        }
    }
    
    .mreading-items-info {
        margin-top: -1px;
        border: 1px solid #e3e3e3;
        border-radius: 0 0 2px 2px;
        padding: 12px 12px 22px;
    }
    
    .mreading-items-info span {
        margin-top: 7px;
        display: block;
        background: url(../../img/view.8cf03219.png) left center no-repeat;
        background-size: 13px;
        padding-left: 18px;
        font-size: 12px;
        color: #7a808f;
    }
</style>
